LabelProvider API

All Axis Types include the AxisCore.LabelProvider property. It allows for complete control over axis label output via ILabelProvider interface. While most common use-case of LabelProvider API is to override default text of Axis or Cursor Labels, it can also be used to provide a ViewModel for every axis label. This ViewModel acts as a DataContext for an axis label and can be bound to in XAML.

Default LabelProvider Types

By default each axis has a LabelProvider created and assigned to the AxisBase.LabelProvider property. The type of LabelProvider depends on the type of Axis. Listed below are default LabelProviders with their corresponding axis types:

• LabelProviderBase – common base class for all LabelProviders.
• DateTimeLabelProvider – used to provide labels on the DateTimeAxis.
• NumericLabelProvider – used to provide labels on the NumericAxis and LogarithmicNumericAxis.
• TimeSpanLabelProvider – used to provide labels on the TimeSpanAxis.
• TradeChartAxisLabelProvider – used to provide labels on the CategoryDateTimeAxis.

If you create a custom LabelProvider, you can inherit it from any of the classes above.

Creating a ViewModel for Axis Labels

ViewModels for Axis Labels are expected to implement the ITickLabelViewModel interface. The default implementation is provided by the DefaultTickLabelViewModel class. LabelProvider creates a ViewModel for an Axis Label in the CreateDataContext() method. Later the ViewModel is updated every time a label is rendered by calling the UpdateDataContext() method.

Existing TickLabelViewModels type names correspond to their respective LabelProvider type names. For example, this is how a custom ViewModel may look like for NumericAxis Labels:

public class ColoredLabelViewModel : NumericTickLabelViewModel
{
   private Brush _foreground;
   public Brush Foreground
   {
      get => _foreground;
      set
      {
         _foreground = value;
         OnPropertyChanged(nameof(Foreground));
      }
   }
}

It declares the Foreground property which can provide a specific foreground for every Axis Label.

Creating a custom LabelProvider

Below is an example of how a custom LabelProvider may look like for a NumericAxis. It is enough for our purposes to inherit from NumericLabelProvider. It makes use of the ColoredLabelViewModel shown above and colors Axis Labels Green if their value is greater than 2, Yellow when it is in [-2, 2] range and Red when it is less than –2:

public class ColoredLabelProvider : NumericLabelProvider
{
   private Brush _redBrush = new SolidColorBrush(Colors.Red);
   private Brush _greenBrush = new SolidColorBrush(Colors.Green);
   private Brush _yellowBrush = new SolidColorBrush(Colors.Yellow);
   public override ITickLabelViewModel CreateDataContext(IComparable dataValue)
   {
      return UpdateDataContext(new ColoredLabelViewModel(), dataValue);
   }
   public override ITickLabelViewModel UpdateDataContext(ITickLabelViewModel labelDataContext, IComparable dataValue)
   {
      base.UpdateDataContext(labelDataContext, dataValue);
      var value = dataValue.ToDouble();
      var labelViewModel = (ColoredLabelViewModel)labelDataContext;
      labelViewModel.Text = labelDataContext.Text;
      labelViewModel.HasExponent = false;
      labelViewModel.Foreground = _yellowBrush;
      if (value > 2)
      {
         labelViewModel.Foreground = _greenBrush;
      }
      if (value < -2)
      {
         labelViewModel.Foreground = _redBrush;
      }
      return labelViewModel;
   }
}

Creating a Style for Axis Labels

The TickLabelStyle property of an Axis can be used to connect Axis Labels with ViewModels provided by a LabelProvider via Bindings. Style should target the DefaultTickLabel type and can bind multiple properties inside to the ViewModel. To continue our example, the Style below contains one Binding to the Foreground property of ColoredLabelViewModel (declared above):

<Style x:Key="ColoredAxisLabelStyle" TargetType="s:DefaultTickLabel">
   <Setter Property="Foreground" Value="{Binding Foreground, Mode=OneWay}"/>
</Style>

As mentioned above, the Style has to be applied to the TickLabelStyle property on an Axis. In the code snippet below it is applied to Axis Labels on YAxis:

<s:SciChartSurface>
   <s:SciChartSurface.XAxis>
      <s:NumericAxis />
   </s:SciChartSurface.XAxis>
   <s:SciChartSurface.YAxis>
      <!-- TickLabelStyle applied to the YAxis -->
      <s:NumericAxis TickLabelStyle="{StaticResource ColoredAxisLabelStyle}"/>
   </s:SciChartSurface.YAxis>
</s:SciChartSurface>

Applying the LabelProvider to Axis

Once TickLabelStyle is set, custom LabelProvider has to be applied to the same Axis to provide DataContext for Axis Labels:

<s:SciChartSurface>
   <s:SciChartSurface.Resources>
      <Style x:Key="ColoredAxisLabelStyle" TargetType="s:DefaultTickLabel">
         <Setter Property="Foreground" Value="{Binding Foreground, Mode=OneWay}"/>
      </Style>
      <useLabelProvider:ColoredLabelProvider x:Key="ColoredLabelProvider" />
   </s:SciChartSurface.Resources>
   <s:SciChartSurface.XAxis>
      <s:NumericAxis />
   </s:SciChartSurface.XAxis>
   <s:SciChartSurface.YAxis<>/p>
      <!-- TickLabelStyle and custom LabelProvider applied to the YAxis -->
      <s:NumericAxis TickLabelStyle="{StaticResource ColoredAxisLabelStyle}" LabelProvider="{StaticResource ColoredLabelProvider}"/>
   </s:SciChartSurface.YAxis>
</s:SciChartSurface>

After setting TickLabelStyle and applying ColoredLabelProvider to YAxis, SciChartSurface appears with labels on YAxis colored accordingly: